<template>
	<view class="commission-rate">
		<!-- 标题行 -->
		<view class="row header">
			<view class="service-item">服务项</view>
			<view class="commission-ratio">接单员佣金比例</view>
		</view>
		<!-- 数据行 -->
		<view class="row" v-for="(item, index) in list" :key="index">
			<view class="service-item">{{ item.projectName }}</view>
			<view class="commission-ratio">{{ item.profit*100 }}%</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		onMounted,
		onUnmounted,
		nextTick,
		watch
	} from 'vue';

	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import {
		getYongJinBiLi
	} from "@/api/xiaoquan.js";
	// 页面加载
	onLoad(() => {
		getYongJinBiLi().then(res => {
			console.log(res);
			list.value = res.data;
		});
	})
	// 模拟数据，可根据实际接口返回调整
	const list = ref([{
			projectName: '快递代取',
			profit: '8'
		},
		{
			projectName: '快递代寄',
			profit: '8'
		},
		{
			projectName: '外卖代拿',
			profit: '0.9'
		},
		{
			projectName: '校园跑腿',
			profit: '0.9'
		}
	]);
</script>

<style scoped>
	/* 容器样式，可根据需求调整内边距、背景等 */
	.commission-rate {
		background-color: #fff;
		margin: 10px;
		border-radius: 6px;
		overflow: hidden;
	}

	/* 行样式，flex 布局实现两端对齐 */
	.row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 12px 16px;
		border-bottom: 1px solid #f2f2f2;
		/* 分割线 */
	}

	/* 标题行特殊样式（可选，比如加深字体、加粗） */
	.row.header {
		font-weight: bold;
		color: #333;
		background-color: #f8f9fa;
		/* 浅灰色背景区分标题 */
	}

	/* 服务项文本样式 */
	.service-item {
		color: #333;
		font-size: 14px;
	}

	/* 佣金比例文本样式 */
	.commission-ratio {
		color: #666;
		font-size: 14px;
	}
</style>